<template>
  <view class="container">
    <view class="top">
      <view class="header">
        <view class="avatar fl1">
          <image src="/static/image/avatar.png" mode="widthFix" />
        </view>
        <view class="fl3">
          <view>{{ user.userName }}</view>
          <view><text style="color: #888888"> 部门 |</text> {{ user.deptName }}</view>
        </view>
        <view class="fl1">
          <view>{{ selectWeek }}</view>
          <view>{{ selectDay }}</view>
        </view>
      </view>
      <view class="line"></view>
      <view v-if="showTip" class="tip">
        <view class="close">
          <view class="dot blue"></view><view class="fl1"> 全天考勤正常</view>
          <image src="/static/image/close_icon.png" mode="widthFix" @click="closeTip" />
        </view>
        <view class="flex align-items-center">
          <view class="dot yellow"></view>
          <view>当天存在异常:迟到、早退、缺卡</view>
        </view>
      </view>
      <lunc-calendar class="calendar" ref="calendar" :showShrink="true" @dayChange="dayChange" :showMonthBg="false" :weekType="true" :signList="signList" :date="defaultDate" :daylist="daylist" @monthChange="monthChange"></lunc-calendar>
    </view>
    <view class="detail">
      <view class="head">当日班次:{{getCurrentDayWork}}</view>
      <view class="statistic">
        <view>出勤统计</view>
        <!-- <view>打卡2次，工时</view> -->
      </view>
      <view class="list">
        <view class="dot"> </view>
        <view class="info">
          <view>上班{{ selectWorkAttendance.fixedSignInTime ? selectWorkAttendance.fixedSignInTime : '' }}</view>
          <view class="address">
            <view><image src="/static/image/sign_loca_icon.png" mode="widthFix" /></view>
            <view>{{ selectWorkAttendance.signInPlace ? selectWorkAttendance.signInPlace : '' }}</view>
          </view>
          <view class="address">
            <view><image src="/static/image/camera_icon.png" mode="widthFix" /></view>
            <view>照片信息</view>
          </view>
          <view class="pic">
            <image :src="selectWorkAttendance.signInImgUrl" mode="aspectFit" />
          </view>
        </view>
      </view>
      <view class="list signout">
        <view class="dot"> </view>
        <view class="info">
          <view>下班{{ selectWorkAttendance.fixedSignOutTime ? selectWorkAttendance.fixedSignOutTime : '' }}</view>
          <view class="address">
            <view><image src="/static/image/sign_loca_icon.png" mode="widthFix" /></view>
            <view>{{ selectWorkAttendance.signOutPlace ? selectWorkAttendance.signOutPlace : '' }}</view>
          </view>
          <view class="address">
            <view><image src="/static/image/camera_icon.png" mode="widthFix" /></view>
            <view>照片信息</view>
          </view>
          <view class="pic">
            <image :src="selectWorkAttendance.signOutImgUrl" mode="aspectFit" />
          </view>
        </view>
      </view>
      <view class="bottom-tip">统计截至{{ currentDate }}</view>
    </view>
  </view>
</template>

<script>
import { detail, month, monthDetail } from '@/service/api/attendance'
import { getUserInfo } from '@/service/auth'
export default {
  data() {
    return {
      year: '',
      month: '',
      day: '',
      userId: '',
      daylist: [],

      signList: [],
      defaultDate: '',
      user: {},
      selectDay: '',
      selectWeek: '',
      selectWorkAttendance: {},
      currentDate: new Date(),
      showTip: true,
      currentDayWork: '',
    }
  },
  computed: {
    getCurrentDayWork() {
      return this.selectWorkAttendance.scheduleName?this.selectWorkAttendance.scheduleName + this.selectWorkAttendance.signInBeginTime + '-' + this.selectWorkAttendance.signOutEndTime:''
   
    },
  },
  created() {},
  mounted() {
    const date = {
      day: this.day,
      month: this.month,
      year: this.year,
    }
    console.log('day=' + date)
    // this.$refs.calendar.setDate(date)
  },
  onLoad(option) {
    console.log(option, '参数')
    this.userId = option.userId >> 0
    this.year = option.year >> 0
    this.month = option.month >> 0

    let currentYear = new Date().getFullYear()
    let currentMonth = new Date().getMonth() + 1
    this.currentDate = new Date().toLocaleString()
    if (currentYear === this.year && currentMonth == this.month) {
      this.day = new Date().getDate()
    } else {
      this.day = 1
    }
    const date = this.year + '-' + this.month + '-' + this.day
    this.selectDay = this.year + '.' + this.month + '.' + this.day
    this.selectWeek = this.getDayOfWeek(new Date(date).getDay())

    this.defaultDate =date
    console.log('defaultDate=' + this.defaultDate)
    this.getMonthList()
    this.user = getUserInfo()
  },
  methods: {
    closeTip() {
      this.showTip = false
    },
    getDayOfWeek(day) {
      const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      return days[day]
    },
    monthChange(val) {
      console.log('monthChange=' + JSON.stringify(val))
    },
    dayChange(val) {
      console.log('val=' + this.daylist.length)
      this.selectDay = val.year + '.' + val.month + '.' + val.day

      this.selectWeek = this.getDayOfWeek(val.week)
      const selYear = val.year >> 0
      const selMonth = val.month >> 0
      if (selYear === this.year && selMonth == this.month) {
        if (this.daylist.length==0) {
          return
        }
        this.selectWorkAttendance = this.daylist[val.day - 1]
      } else {
        this.year = selYear
        this.month = selMonth
        this.getMonthList()
      }
    },
    getMonthList() {
      const data = {
        userId: this.userId,
        endYear: this.year,
        endMonth: this.month,
        startYear: this.year,
        startMonth: this.month,
        size: '999',
      }
      this.uniShowLoading()
      monthDetail(data)
        .then(res => {
          this.uniHideLoading()
          if (res.status === 200) {
            this.daylist = res.data.content
            this.selectWorkAttendance = this.daylist[this.day - 1]
            console.log('select=' + JSON.stringify(this.selectWorkAttendance))
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
            })
          }
        })
        .catch(err => {
          this.uniHideLoading()
          uni.showToast({
            title: err.msg,
            icon: 'none',
          })
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom, #e3e7fa, #f1f7fa, #ffffff);
  padding-top: 20px;
  .top {
    background-color: white;
    border-radius: 10rpx;
    padding: 20rpx;
    margin: 20rpx;
    box-shadow: 5rpx 5rpx 15rpx rgba(96, 124, 169, 0.12);
    .header {
      display: flex;
      .avatar {
        image {
          width: 80rpx;
          height: 80rpx;
        }
      }
    }
    .line {
      height: 1px;
      width: 100vw;
      background: #f1f1f1;
      margin: 20rpx 0;
    }
    .tip {
      background-color: #f3f5f9;
      border-radius: 10rpx;
      padding: 20rpx 15rpx;
      .close {
        display: flex;
        justify-content: space-between;
        align-items: center;
        image {
          width: 30rpx;
          height: 30rpx;
        }
      }

      .yellow {
        background-color: #fe9808;
      }
    }
  }
  .detail {
    background-color: white;
    border-radius: 10rpx;
    padding-bottom: 30rpx;
    margin: 20rpx;
    box-shadow: 5rpx 5rpx 15rpx rgba(96, 124, 169, 0.12);
    .head {
      background: linear-gradient(to bottom, #7ab0eb, #2c6dff);
      color: white;
      height: 80rpx;
      line-height: 80rpx;
      padding-left: 20rpx;
      border-top-left-radius: 10rpx;
      border-top-right-radius: 10rpx;
    }
    .statistic {
      display: flex;
      justify-content: space-between;
      padding: 20rpx;
    }
    .list {
      padding-left: 20rpx;
      display: flex;
      align-items: baseline;
      .info {
        .address {
          display: flex;
          align-items: center;
          color: #888888;
          font-size: 26rpx;
          margin-top: 10rpx;
          image {
            width: 20rpx;
            height: 20rpx;
            margin-right: 10rpx;
          }
        }
        .pic {
          width: 106rpx;
          height: 72rpx;
          margin-top: 10rpx;
          image {
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
          }
        }
      }
    }
    .signout {
      margin-top: 20rpx;
    }
    .bottom-tip {
      color: #888888;
      font-size: 24rpx;
      margin-left: 20rpx;
      margin-top: 30rpx;
    }
  }
  .dot {
    width: 10rpx;
    height: 10rpx;
    background-color: #368af5;
    border-radius: 50%;
    margin-right: 10rpx;
  }
}
</style>
